<!-- 将src\views\shop\goods\list.vue中上方开发的serach组件进行封装
 设置左右两部分分别为两个插槽 -->
<template>
    <div>
        <!-- 标签页的内容 -->
        <!-- 高级搜索-->
        <div class="d-flex align-items-center">
            <!-- 左边 -->
            <slot name="left"></slot>
            <!-- 右边 -->
            <!-- v-show="!superSearch"当没有打开高级搜索的输入框时，展示这些按钮 -->
            <div class="ml-auto" v-show="!superSearch" v-if="showSearch">
                <!-- 当slot没有传入时，使用其中默认的  -->
                <slot name="right">
                    <el-input v-model="keyword" :placeholder="placeholder" size="mini"
                        style="width: 150px; margin-right: 5px;"></el-input>
                    <!-- 父组件监听search事件，传入的值为keyword -->
                    <el-button type="info" size="mini" @click="$emit('search', keyword)">搜索</el-button>
                    <el-button size="mini" v-if="showSuperSearch" @click="superSearch = true">高级搜索</el-button>
                </slot>
            </div>
        </div>
        <!-- v-show="superSearch"为true，展示卡片 -->
        <el-card class="bg-light my-3" v-show="superSearch">
            <div slot="header" class="clearfix " style="margin: -10px;">
                <span style="float: left;">高级搜索</span>
                <el-button style="float: right; padding: 3px 0" type="text" 
                @click="closeSuperSearch">收起</el-button>
            </div>

            <!-- 表单 -->
            <slot name="form">
                <el-form inline ref="form" :model="form" label-width="70px">
                    <el-form-item label="商品名称" class="mb-0" placeholder="输入商品名称">
                        <el-input v-model="form.name" size="mini">

                        </el-input>
                    </el-form-item>
                    <el-form-item label="商品编码" class="mb-0" placeholder="输入商品名称">
                        <el-input v-model="form.code" size="mini">

                        </el-input>
                    </el-form-item>
                    <el-form-item label="商品类型" class="mb-0" placeholder="输入商品名称">
                        <el-select v-model="form.type">
                            <el-option label="区域一" value="shanghai">

                            </el-option>
                            <el-option label="区域二" value="beijing">

                            </el-option>
                        </el-select>

                    </el-form-item>
                    <el-form-item label="商品分类" class="mb-0">
                        <el-input v-model="form.category" size="mini">

                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" size="mini" @click="searchEvent">搜索</el-button>
                        <el-button size="mini" @click="clearSearch">清空筛选条件</el-button>
                    </el-form-item>
                </el-form>
            </slot>
        </el-card>
    </div>

</template>
<script>
export default {
    // 接受传值
    props: {
        placeholder: {
            type: String,
            default: '',
        },
        showSearch:{
            type:Boolean,
            default:true,
        },
        showSuperSearch:{
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            keyword: '',
            superSearch: false,
            form: {
                name: '',
                code: '',
                type: '',
                category: ''
            }
        }
    },
    methods: {
        // 收起高级搜索框
        closeSuperSearch() {
            this.superSearch = false;
        },
        // 高级搜索事件
        searchEvent() {
            this.$emit('search', this.form);
            this.superSearch = false;
        },
        // 清空搜索条件
        clearSearch() {
            this.form = {
                name: '',
                code: '',
                type: '',
                category: ''
            };
            this.$emit('search', this.form);
        }
    }
}

</script>
<style scoped lang="scss">
.el-select {
  height: 28px;
  .el-input__inner {
    height: 28px;
  }

  .el-input__prefix, .el-input__suffix {
    height: 28px;
  }

  /* 下面设置右侧按钮居中 */
  .el-input__suffix {
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
  /* 输入框加上上下边是 28px + 2px =34px */
  .el-input__icon {
    line-height: 30px;
  }
}
</style>